<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=[
"/js/service/net.js",
				"/js/app/net.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css"] in base/>
<@base.page "">
<!-- -->
<div class="grid-content bg-purple-light">
	<el-col :span="24" class="content-wrapper">
		<section>
			<el-col :span="24" class="toolbar">
				<el-row>
					<el-button type="success" plain size="small" icon="el-icon-plus" @click="add()" >添加</el-button>
				</el-row>
				<el-form inline="true" :model="searchVm">
					<el-form-item label="">
						<el-input style="width: 150px;"v-model="searchVm.name" clearable placeholder="网关名称"></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-input style="width: 150px;"v-model="searchVm.netid" clearable placeholder="网关ID"></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-select style="width: 150px;"v-model="searchVm.nettype"  clearable placeholder="类型">
							<el-option v-for="item in options" :value="item.value" :key="item.value" :label="item.label"></el-option>
						</el-select>
					</el-form-item>
					<@but.search "search()" ":loading='tableVm.loading'"/>
				</el-form>
				<!--表格-->
				<el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%" v-loading="tableVm.loading">
					<el-table-column prop="name" label="网关名称"  min-width="100" show-overflow-tooltip></el-table-column>
					<el-table-column prop="netid" label="网关ID"  min-width="100" show-overflow-tooltip></el-table-column>
					<el-table-column prop="nettype" label="类型"  min-width="100" show-overflow-tooltip></el-table-column>
					<el-table-column prop="remark" label="备注"  min-width="100" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作"  min-width="300">
						<template scope="scope">
							<@tabt.edit "edit(scope.$index,scope.row)" />
							<@tabt.delete "deleteRow(scope.$index,scope.row)" />
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
					<el-pagination  @current-change="handleCurrentChange" :current-page="tableVm.pageIndex" :page-size="tableVm.pageSize" layout="prev, pager, next, jumper" :total="tableVm.total"></el-pagination>
				</div>
				<!--编辑界面-->
				<el-dialog :title="editVm.oprate" :visible.sync="editVm.visible" width="900px">
					<el-form :model="editVm.data" label-width="150px" :rules="editVm.editFormRules.formRules" ref="editForm">
						<el-row>
							<el-form-item label="网关名称" prop="name">
								<el-input v-model="editVm.data.name" :disabled="!editVm.isEdit" maxlength="20" placeholder="自定义名称"></el-input>
							</el-form-item>
							<el-form-item label="网关ID" prop="netid">
								<el-input v-model="editVm.data.netid" :disabled="!editVm.isEdit" maxlength="20" placeholder="ID由总部分发"></el-input>
							</el-form-item>
							<el-form-item label="类型" prop="nettype" >
								<el-select v-model="editVm.data.nettype" :disabled="!editVm.isEdit" maxlength="20" placeholder="类型">
									<el-option v-for="item in options" :value="item.value" :key="item.value" :label="item.label"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="备注" prop="remark">
								<el-input type="textarea" v-model="editVm.data.remark" :disabled="!editVm.isEdit" maxlength="20"></el-input>
							</el-form-item>
						</el-row>
					</el-form>
					<div solt="footer" class="dialog-footer">
						<@but.cancel "editVm.visible = false" />
						<@but.save "save(editVm)" 'v-if="editVm.isEdit" :loading="editVm.loading"'/>
					</div>
				</el-dialog>
			</el-col>
		</section>
	</el-col>
</div>

</@base.page>
